import React, { useMemo, useRef, useState } from "react";
import "./index.less";
import { Button, Col, List, Row, Select, Space } from "tdesign-react";
import {
  SendIcon,
  ArticleIcon,
  ChatClearIcon,
  CopyIcon,
} from "tdesign-icons-react";
import messageStore from "../../store/MessageStore";

export default function Chat() {
  const msgBoxRef = useRef();
  const [roomId, setRoomId] = useState("");
  const roomListOptions = useMemo(
    () =>
      messageStore.localNetRoomList.map((item) => ({
        label: item.room,
        value: item.room,
      })),
    [messageStore.localNetRoomList]
  );

  const sendMessage = () => {
    const msg = msgBoxRef.current.innerHTML;
    window.postMessage(
      {
        type: "sendMsg",
        data: {
          content: msg,
          room: roomId,
        },
      },
      "*"
    );
  };

  return (
    <div className="chat">
      <Row justify="space-between">
        <h2>长文消息</h2>
        <Select
          style={{ width: 160 }}
          value={roomId}
          onChange={(val) => setRoomId(val)}
          placeholder="请选择一个房间"
          options={roomListOptions}
        />
      </Row>
      <p>在设备之间互发消息，或传送长图文内容</p>
      <div className="editor">
        <p ref={msgBoxRef} contentEditable />
        <Row className="actions" gutter={12} justify="end" align="center">
          <Col className="desc">输入文字 (发送快捷键：Shift + Enter)</Col>
          <Col>
            <Button onClick={sendMessage} icon={<SendIcon />}>
              发送
            </Button>
          </Col>
        </Row>
      </div>

      <Row align="center" justify="space-between">
        <Space>
          <ArticleIcon />
          <span>消息记录</span>
        </Space>
        <Button theme="primary" icon={<ChatClearIcon />} variant="text">
          全部清空
        </Button>
      </Row>
      <List>
        <List.ListItem
          action={
            <Button shape="circle" icon={<CopyIcon size={14} />}></Button>
          }
        >
          <List.ListItemMeta
            image="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F26a3b3c9-1833-4385-a294-8d4f12afacd6%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1709024166&t=f544deb8a34f0eb0ca37c3e5d00e9024"
            title="你好"
            description="16:14:53"
          />
        </List.ListItem>
      </List>
    </div>
  );
}
